<template>
  <div class="car-file">
    <div class="header">
      <p class="title">用户管理/车主档案列表</p>
      <!-- 筛选查询 -->
      <div class="search">
        <div class="search-content">
          <div class="p">
            <i class="el-icon-search i"></i><span>筛选查询</span>
          </div>
          <div class="search-inp">
            <el-input v-model="input1" placeholder="输入姓名查询"></el-input>
            <el-input
              v-model="input2"
              placeholder="输入手机号进行查询"
            ></el-input>
            <el-input
              placeholder="证件到期时间进行查询"
              suffix-icon="el-icon-date"
              v-model="input3"
            >
            </el-input>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 车主档案-->
    <template>
      <el-table :data="tableData" border style="width: 100%" max-height="500">
        <el-table-column prop="id" label="会员编号" width="100">
        </el-table-column>
        <el-table-column prop="uname" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="tel" label="手机号"> </el-table-column>
        <el-table-column prop="cid" label="身份证" width="200">
        </el-table-column>
        <el-table-column prop="type" label="车辆类型" width="80">
        </el-table-column>
        <el-table-column prop="pid" label="行驶证号" width="200">
        </el-table-column>
        <el-table-column prop="time" label="证件到期时间" width="150">
        </el-table-column>
        <el-table-column prop="auditor" label="审核人" width="100">
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
//import api from "../../api/index";
export default {
  data() {
    return {
      input1: "",
      input2: "",
      input3: "",
      tableData: [
        {
          id:1,
          uname:'lucy',
          tel:15811112222,
          cid:1234567891234567,
          type:'商务车',
          pid:123456789123,
          time:'2020-12-22',
          auditor:'张三'

        }
      ],//列表

      total: 0,//分页
    };
  },
  mounted() {
    //网络请求
    //this.http(1);
    //分页显示
    // api.carFilePage().then(res=>{
    //   console.log(res.data);
    //     if (res.status == 200) {
    //     this.total = res.data.result[0]["count(*)"];
    //   }
    // })
  },
  methods: {
    // http(page) {
    //   api.carFile(page).then((res) => {
    //     console.log(res.data);
    //     if (res.data.status == 200) {
    //       this.tableData = res.data.result;
    //     }
    //   });
    // },
    //重置
    onReset() {
      this.input1 = "";
      this.input2 = "";
      this.input3 = "";
    },
    // //模糊查询
    onSearch() {
       //console.log(search);
      //  let search=this.input1||this.input2||this.input3
      // api.carFileSearch({ search }).then((res) => {
      //   //console.log(res.data);
      //   if (res.status == 200) {
      //     this.tableData = res.data.result;
      //   }
      // });
     
    },
    //点击修改跳转详情页
    handleEdit(index, row) {
      console.log(index, row);
      this.$router.push("/carDetails/"+ row.id);
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row.id);
      // this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     api
      //       .carFileDelete({
      //         id: row.id,
      //       })
      //       .then((res) => {
      //         console.log(res.data);
      //         if (res.data.code == 200) {
      //           this.$message({
      //             message: "删除成功",
      //             type: "success",
      //           });
      //           this.http(1);
      //         } else {
      //           this.$message({
      //             message: "删除失败",
      //             type: "warning",
      //           });
      //         }
      //       });
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消删除",
      //     });
      //   });
    },
    //分页
    handleCurrentChange(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped lang='less'>
.car-file {
  width:1200px;
  padding-top: 10px;
  padding-left: 200px;
}
.header {
  margin-bottom: 70px;
}
.title {
  text-align: left;
  font-size: 14px;
}
.search {
  width: 100%;
  height: 170px;
  background: #eeeeee;
  margin-top: 25px;
  line-height: 30px;

  .search-content {
    width: 80%;
    margin-left: 120px;

    .p {
      padding: 20px;
      font-weight: bold;
      text-align: left;
      .i {
        width: 12px;
        font-weight: bold;
        margin-right: 10px;
      }
    }
    .search-inp {
      display: flex;
      .el-input {
        width: 200px;
        height: 25px;
        margin: 10px;
      }
      .el-button {
        margin: 10px;
      }
    }
  }
}
.pagination {
  margin-top: 50px;
}
</style>